import 'package:flutter/material.dart';

class ParentingAnimationPage extends StatefulWidget {
  @override
  ParentingAnimationPageState createState() => ParentingAnimationPageState();
}

class ParentingAnimationPageState extends State<ParentingAnimationPage>
    with TickerProviderStateMixin {
  late Animation opacityTween;
  Animation? widthTween;
  late Animation stopTween;
  late AnimationController _controller;

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
        duration: const Duration(milliseconds: 3100), vsync: this)
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          setState(() {
            _controller.reset(); // 在动画状态是完成的时候，再进行重置
            _controller.forward(); // 在动画状态是完成的时候，再进行开始动画。
          });
        }
      });

    stopTween = Tween<double>(
      begin: 0,
      end: 1,
    ).animate(CurvedAnimation(
      parent: _controller,
      curve: Curves.fastOutSlowIn,
    ));

    widthTween = Tween<double>(
      begin: 0,
      end: 500,
    ).animate(
        CurvedAnimation(parent: _controller, curve: Curves.fastOutSlowIn));

    opacityTween = Tween<double>(
      begin: 1,
      end: 0,
    ).animate(CurvedAnimation(parent: _controller, curve: Curves.easeIn));
    _controller.forward();
  }

  @override
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text('歌词遮罩显示'),
      ),
      body: buildShaderMask(),
    );
  }

  buildAnimation() {
    return AnimatedBuilder(
      animation: _controller,
      builder: (BuildContext context, Widget? child) {
        return MediaQuery.removePadding(
          context: context,
          removeTop: true,
          child: Stack(
            children: <Widget>[
              ShaderMask(
                child: Center(
                    child: new Text(
                  '天青色等烟雨,而我在等你',
                )),
                shaderCallback: (rect) {
                  print(rect.width);
                  return LinearGradient(
                    colors: [
                      Colors.greenAccent,
                      Colors.transparent,
                    ],
                    begin: Alignment.centerLeft,
                    end: Alignment.centerRight,
                    stops: [stopTween.value, 1],
                  ).createShader(rect);
                },
                blendMode: BlendMode.srcATop,
              ),
              Opacity(
                opacity: opacityTween.value,
                child: Center(
                  child: Text(
                    '天青色等烟雨,而我在等你',
                    style: TextStyle(color: Colors.black38),
                  ),
                ),
              )
            ],
          ),
        );
      },
    );
  }

  buildWidget() {
    return ShaderMask(
      shaderCallback: (Rect bounds) {
        // return LinearGradient(
        //   begin: Alignment.topCenter,
        //   end: Alignment.bottomCenter,
        //   colors: [Colors.white, Colors.white, Colors.transparent],
        //   stops: [0.0, 0.5, 1.0],
        // ).createShader(
        //   const Offset(0.0, 100.0) & const Size(0.0, 200.0),
        //   // Offset.zero & Size(750, 100),
        // );
        return LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: <Color>[Colors.transparent, Colors.white],
        ).createShader(
          const Offset(0.0, -40.0) & const Size(0.0, 60.0),
        );
      },
      child: Container(
        // color: Colors.white,
        width: double.infinity,
        child: ListView(
          children: <Widget>[
            ...[1, 2, 3, 4].map((_) {
              return Text(
                "测试文本" * 5,
                style: TextStyle(
                  fontSize: 16.0,
                ),
                overflow: TextOverflow.fade,
              );
            }).toList(),
          ],
        ),
      ),
    );
  }

  buildShaderMask() {
    // 可以实现歌词滚动时,超出部分渐变效果
    return Center(
      child: ShaderMask(
        blendMode: BlendMode.dstIn,
        shaderCallback: (Rect bounds) {
          return LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: <Color>[
              Colors.transparent,
              Colors.white,
            ],
          ).createShader(
            Offset.zero & const Size(0.0, 50.0),
            // bounds
          );
        },
        child: Container(
          height: 400.0,
          padding: EdgeInsets.all(8.0),
          child: ListView(
            children: <Widget>[
              ...[1, 2, 3, 4, 6, 7, 8, 9, 0].map((_) {
                return Padding(
                  padding: EdgeInsets.only(bottom: 8.0),
                  child: Container(
                    // padding: EdgeInsets.all(8.0),
                    // alignment: Alignment.center,
                    // height: 30.0,
                    decoration: ShapeDecoration(
                      color: Color(0xFFFD8D32).withAlpha(179),
                      shape: RoundedRectangleBorder(
                        side: BorderSide.none,
                        borderRadius: BorderRadius.all(
                          Radius.circular(5),
                        ),
                      ),
                    ),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        ClipOval(
                          child: Image.asset(
                            "assets/images/landscape.png",
                            width: 30.0,
                            height: 30.0,
                            fit: BoxFit.cover,
                          ),
                        ),
                        Text(
                          "测试文本" * 5,
                          style: TextStyle(
                            fontSize: 16.0,
                          ),
                          overflow: TextOverflow.fade,
                        )
                      ],
                    ),
                  ),
                );
              }).toList(),
            ],
          ),
        ),
      ),
    );
  }
}
